import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import "./app-visual-stepper.less";

/**
 * @description 虚拟表单步进器
 * @export
 * @class AppVisualStepper
 * @extends {Vue}
 */
@Component({})
export class AppVisualStepper extends Vue {
  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualStepper
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualStepper
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualStepper
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualStepper
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualStepper
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualStepper
   */
  @Prop() realCompRef!: any;

  public onChange(value: string, isButton?: boolean) {
    if (isButton) {
      this.$emit("change", {
        name: this.name,
        value: this.realCompRef.value + Number(value),
      });
    } else {
      this.$emit("change", {
        name: this.name,
        value: parseInt(value),
      });
    }
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualStepper
   */
  public render() {
    return (
      <div
        class={"app-visual-stepper luckysheet-mousedown-cancel"}
        style={{
          height: `${this.position.height}px`,
        }}
      >
        <div class="visual-input-number">
          <span
            class="visual-input-number__decrease luckysheet-mousedown-cancel"
            onClick={() => {
              this.onChange('-1', true);
            }}
            style={{
              width: `${this.position.height}px`,
              height: `${this.position.height}px`,
            }}
          >
            <i class="visual-icon-minus luckysheet-mousedown-cancel"></i>
          </span>
          <span
            class="visual-input-number__increase luckysheet-mousedown-cancel"
            onClick={() => {
              this.onChange('1', true);
            }}
            style={{
              width: `${this.position.height}px`,
              height: `${this.position.height}px`,
            }}
          >
            <i class="visual-icon-plus luckysheet-mousedown-cancel"></i>
          </span>
          <div class="visual-input" style={{ height: `${this.position.height}px`, lineHeight: `${this.position.height}px` }}>
            <input
              type="text"
              value={this.realCompRef.value}
              class="visual-input__inner luckysheet-mousedown-cancel"
              style={{ height: `${this.position.height}px` }}
              onBlur={($event: any) => {
                this.onChange($event.target.value);
              }}
            />
          </div>
        </div>
      </div>
    );
  }
}
